<script>
import { ArrowLeft, DocumentAdd } from "@element-plus/icons-vue";

import { regulate, addregulate ,ctrlregulate,editlist} from "@/api/notice";

export default {
  data() {
    return {
      list: [],
      page: 1,
    };
  },
  components: {
    ArrowLeft,
  },
  mounted() {
    regulate().then((res) => {
      this.list = res;
      console.log(res);
    });
  },
  methods: { 
    //编辑按钮
    compile(row){
      row.show = '1'
      editlist(row).then(res=>{
        if(res.code == 200){
          ElMessage.success("编辑成功");
        }
      })
    },


    //删除通知管理数据
    mdelregulat(row){
      ctrlregulate(row).then(res =>{
        if(res.code == 200){
          ElMessage.success("删除成功");
        }
        regulate().then(res=>{
          this.list = res
      })
      })
    },

    //修改通知管理数据
    edit(row){
      if(row.state =='停用'){
        row.state = '启用' 
      }else{
        row.state = '停用'
      }
      editlist(row).then(res=>{
      console.log(res)
      if(res.code == 200){
          ElMessage.success("修改状态成功");
        }
      })
  },

    //新增通知管理数据
    addlist() {
      ElMessageBox.prompt("类型名称", "编辑类型", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入类型",
      })
        .then(({ value }) => {
          addregulate({
            Type: value,
            aheader: "内置",
            id: "66D674-98ac-4628-b40d-8CD1",
            state: "停用",
          }).then((res) => {
            console.log(res);
            regulate().then((res) => {
              this.list = res;
              console.log(res);
            });
            ElMessage({
              type: "success",
              message: `已提交`,
            });
          });
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "未提交",
          });
        });
    },
  },
  components: {
    DocumentAdd,
  },
};
</script>
<template>
  <div>
    通知类型管理
    <el-button @click="addlist" class="xz" type="primary">
      <el-icon><DocumentAdd /></el-icon>
      新增</el-button
    >
    <el-table :data="list" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="100" />
      <el-table-column
        align="center"
        prop="Type"
        label="通知类型"
        width="180"
      />
      <el-table-column align="center" prop="aheader" label="属性" width="180" />
      <el-table-column align="center" prop="state" label="状态" width="180" > 
        <template #default="scope">
                <div v-if="scope.row.state ==='启用'" style="color: #2aed4a;">
                  {{ scope.row.state }}
                </div>
                <div v-else style="color: #d71d1d;">
                  {{ scope.row.state }}
                </div>
              </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
       <template #default="scope">
       <div v-if="scope.row.show ==='1'" >
        -----
       </div>
       <div v-else>
        <el-button @click="compile(scope.row)" type="primary">编辑</el-button>
        <el-button @click="edit(scope.row)" type="success">{{scope.row.state ==='启用'? '停用':'启用' }}</el-button>
        <el-button  @click="mdelregulat(scope.row)" type="danger">删除</el-button>
       </div>
       </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.xz {
  float: right;
  margin-bottom: 20px;
}
</style>
